<script setup>
import { inject, ref } from "vue";
import { useCounterStore } from "@/stores/upgrade";
import { useUserStore } from "@/stores/user";
import { uploadfile } from "@/services/upload";
import { base_URL } from "@/utils/http";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { areaListApi } from "@/services/address";
import arrurl from "@/static/index/icom-tx.png";
import { userinfo, cardedit, mycard } from "@/services/user";

import {
  upgradecreate,
  agencyCreate,
  getAreaPrice,
  dataInfo,
  upgradedetails,
} from "@/services/upfrade";
onShow(() => {
  mycardfun();
});

async function mycardfun() {
  let res = await mycard({
    referrer_id: 0,
  });
  if (res.code == 200) {
    if (res.data.length <= 0) {
    } else {
      if (res.data.head) {
        avatar.value = res.data.head;
      }
      if (res.data.back_img) {
        fileList1.value[0] = {
          url: res.data.back_img,
        };
      }
      if (res.data.video_intro) {
        fileList2.value[0] = {
          url: res.data.video_intro,
        };
      }
      if (res.data.video_cover) {
        fileList3.value[0] = {
          url: res.data.video_cover,
        };
      }
      if (res.data.content) {
        let reslist = res.data.content.split(",");
        reslist.forEach((item, index) => {
          fileList4.value.push({
            url: item,
          });
        });
      }

      // fileList4.value[0] = {
      //   url: res.data.back_img,
      // };
      tagelist.value = [];
      if (res.data.label.length > 0) {
        res.data.label.forEach((item) => {
          tagelist.value.push({ checked: true, title: item });
        });
      }

      fromdate.value = res.data;
    }
  }
}

async function getuserinfo() {
  let userdata = await userinfo();
  fromdate.value.phone = userdata.data.phone;
  fromdate.value.name = userdata.data.name;
}

// const form = useCounterStore ();
const avatar = ref(arrurl);
const testid = ref("");
const dateobj = useCounterStore();
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);
const fileList4 = ref([]);
const uForm = ref(null);
const tagelist = ref([{ checked: true, title: "职业高手" }]);
const isupgradecard = ref(false);
const fromdate = ref({
  head: "",
  real_name: "",
  title: "",
  mobile: "",
  telphone: "",
  email: "",
  company: "",
  address: "",
  wechat: "",
  signature: "",
  back_img: "",
  video_intro: "",
  video_cover: "",
  label: "",
  content: "",
  arr: "",
});

const user = useUserStore();

const props = defineProps({
  type: {
    type: String,
    default: () => {
      return "";
    },
  },
});
const type = ref(0);
onLoad((e) => {
  getuserinfo();
  isupgradecard.value = true;
  fromdate.value.type = type.value;
});

fromdate.value.mold = 1;
const current = ref(0);

fromdate.value = { ...fromdate.value, ...dateobj.formdate };
if (dateobj.formdate.type) type.value = dateobj.formdate.type;
// fileList1.value = dateobj.formdate.fileList1 ? dateobj.formdate.fileList1 : [];
// fileList2.value = dateobj.formdate.fileList2 ? dateobj.formdate.fileList2 : [];
// fileList3.value = dateobj.formdate.fileList3 ? dateobj.formdate.fileList3 : [];
// fileList4.value = dateobj.formdate.fileList4 ? dateobj.formdate.fileList4 : [];

const btformdatashow = ref(false);
const confirm = (e) => {
  btformdatashow.value = false;
};
const cancel = () => {
  btformdatashow.value = false;
};
// 单选
const radiolist1 = ref([
  {
    name: "个人",
    value: 1,
    disabled: false,
  },
  {
    name: "企业",
    value: 2,
    disabled: false,
  },
]);

const radioChange = (value) => {
  fromdate.value.mold = value;
};

const nextfun = async () => {
  fromdate.value.fileList1 = fileList1.value;
  fromdate.value.fileList2 = fileList2.value;
  fromdate.value.fileList3 = fileList3.value;
  fromdate.value.fileList4 = fileList4.value;
  dateobj.setformdate({
    ...dateobj.formdate,
    ...fromdate.value,
  });

  if (!fromdate.value.mobile) {
    return uni.showToast({
      title: "请输入手机号",
      icon: "none",
    });
  }
  if (!fromdate.value.real_name) {
    return uni.showToast({
      title: "请输入姓名",
      icon: "none",
    });
  }
  if (!fromdate.value.title) {
    return uni.showToast({
      title: "请输入头衔",
      icon: "none",
    });
  }
  if (!fromdate.value.company) {
    return uni.showToast({
      title: "请输入公司名称",
      icon: "none",
    });
  }
  if (!fromdate.value.address) {
    return uni.showToast({
      title: "请输入地址",
      icon: "none",
    });
  }

  fromdate.value.back_img =
    fileList1.value.length > 0 ? fileList1.value[0].url : "";
  fromdate.value.video_intro =
    fileList2.value.length > 0 ? fileList2.value[0].url : "";
  fromdate.value.video_cover =
    fileList3.value.length > 0 ? fileList3.value[0].url : "";
  fromdate.value.content = "";
  if (fileList4) {
    fileList4.value.forEach((item, index) => {
      if (fromdate.value.content == "") {
        fromdate.value.content = item.url;
      } else {
        fromdate.value.content = fromdate.value.content + "," + item.url;
      }
    });
  }
  fromdate.value.label = "";
  tagelist.value.forEach((element, index) => {
    if (fromdate.value.label == "") {
      if (element.checked) {
        fromdate.value.label = element.title;
      }
    } else {
      if (element.checked) {
        fromdate.value.label = fromdate.value.label + "," + element.title;
      }
    }
  });
  try {
    let res = await cardedit(fromdate.value);
    if (res.code == 200) {
      uni.showToast({
        title: "操作成功",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 1000);
    } else {
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }

  return;

  // uni.navigateTo({
  //   url:
  //     "/pages/upgrade/upgradepay?type=" +
  //     type.value +
  //     "&product_id=" +
  //     fromdate.value.product_id,
  // });

  fromdate.value.card_z =
    fileList1.value.length > 0 ? fileList1.value[0].url : "";
  fromdate.value.card_f =
    fileList2.value.length > 0 ? fileList2.value[0].url : "";
  fromdate.value.card_s =
    fileList3.value.length > 0 ? fileList3.value[0].url : "";
  fromdate.value.business_card =
    fileList4.value.length > 0 ? fileList4.value[0].url : "";
};

//上传图片
// 删除图片
const deletePic1 = (event, type) => {
  let fileList = [];

  fileList = fileList1.value;

  fileList.splice(event.index, 1);
};
const afterRead1 = async (event, type) => {
  let fileListLen = 0;
  let filelist = [];
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  fileListLen = fileList1.value.length;
  filelist = fileList1.value;

  let lists = [].concat(event.file);
  lists.map((item) => {
    filelist.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });

  // return;
  for (let i = 0; i < lists.length; i++) {
    uni.uploadFile({
      url: base_URL + "/api/upload/file",
      filePath: lists[i].url,
      name: "file",
      formData: {
        user: "test",
      },
      header: {
        Authorization: uni.getStorageSync("Authorization"),
      },
      success: async (uploadFileRes) => {
        let data = JSON.parse(uploadFileRes.data);
        if (data.code == 200) {
          filelist.splice(fileListLen, 1, {
            ...item,
            status: "success",
            message: "",
            url: data.data.url,
          });
          fileListLen++;
        }
      },
      fail: function (e) {
        uni.hideLoading();
      },
    });

    let item = fileList1.value[fileListLen];
  }
};
const deletePic2 = (event, type) => {
  let fileList = [];

  fileList = fileList2.value;

  fileList.splice(event.index, 1);
};
const afterRead2 = async (event, type) => {
  let fileListLen = 0;
  let filelist = [];
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  fileListLen = fileList2.value.length;
  filelist = fileList2.value;

  let lists = [].concat(event.file);
  lists.map((item) => {
    filelist.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });

  // return;
  for (let i = 0; i < lists.length; i++) {
    uni.uploadFile({
      url: base_URL + "/api/upload/file",
      filePath: lists[i].url,
      name: "file",
      formData: {
        user: "test",
      },
      header: {
        Authorization: uni.getStorageSync("Authorization"),
      },
      success: async (uploadFileRes) => {
        let data = JSON.parse(uploadFileRes.data);
        if (data.code == 200) {
          filelist.splice(fileListLen, 1, {
            ...item,
            status: "success",
            message: "",
            url: data.data.url,
          });
          fileListLen++;
        }
      },
      fail: function (e) {
        uni.hideLoading();
      },
    });

    let item = fileList2.value[fileListLen];
  }
};
const deletePic3 = (event, type) => {
  let fileList = [];

  fileList = fileList3.value;

  fileList.splice(event.index, 1);
};
const afterRead3 = async (event, type) => {
  let fileListLen = 0;
  let filelist = [];
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  fileListLen = fileList3.value.length;
  filelist = fileList3.value;

  let lists = [].concat(event.file);
  lists.map((item) => {
    filelist.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });

  // return;
  for (let i = 0; i < lists.length; i++) {
    uni.uploadFile({
      url: base_URL + "/api/upload/file",
      filePath: lists[i].url,
      name: "file",
      formData: {
        user: "test",
      },
      header: {
        Authorization: uni.getStorageSync("Authorization"),
      },
      success: async (uploadFileRes) => {
        let data = JSON.parse(uploadFileRes.data);
        if (data.code == 200) {
          filelist.splice(fileListLen, 1, {
            ...item,
            status: "success",
            message: "",
            url: data.data.url,
          });
          fileListLen++;
        }
      },
      fail: function (e) {
        uni.hideLoading();
      },
    });

    let item = fileList3.value[fileListLen];
  }
};
const deletePic4 = (event, type) => {
  let fileList = [];

  fileList = fileList4.value;

  fileList.splice(event.index, 1);
};
const afterRead4 = async (event, type, name) => {
  let fileListLen = 0;
  let filelist = [];
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

  fileListLen = fileList4.value.length;
  filelist = fileList4.value;

  let lists = [].concat(event.file);
  lists.map((item) => {
    filelist.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });

  console.log(event, type, name);

  // return;
  for (let i = 0; i < lists.length; i++) {
    uni.uploadFile({
      url: base_URL + "/api/upload/file",
      filePath: lists[i].url,
      name: "file",
      formData: {
        user: "test",
      },
      header: {
        Authorization: uni.getStorageSync("Authorization"),
      },
      success: async (uploadFileRes) => {
        let data = JSON.parse(uploadFileRes.data);
        if (data.code == 200) {
          // fileList4.value.push({
          //   url: data.data.url,
          // });

          filelist.splice(fileListLen, 1, {
            status: "success",
            message: "",
            url: data.data.url,
          });
          fileListLen++;
        }
        console.log(data, fileList4.value);
      },
      fail: function (e) {
        uni.hideLoading();
      },
    });

    let item = fileList4.value[fileListLen];
  }
};

const index = ref(-1);
const array = ref([]);

const bindPickerChange = (e) => {
  index.value = e.detail.value;
  fromdate.value.bank = array.value[index.value].bank_name;
};

//头像上传
//文件上传
const selectFileNew = (e) => {
  uni.showLoading({
    mask: true,
    title: "上传中",
  });

  uni.uploadFile({
    url: base_URL + "/api/upload/file",
    filePath: e.tempFilePaths[0],
    name: "file",
    formData: {
      user: "test",
    },
    header: {
      Authorization: uni.getStorageSync("Authorization"),
    },
    success: async (uploadFileRes) => {
      let data = JSON.parse(uploadFileRes.data);
      if (data.code == 200) {
        fromdate.value.head = data.data.url;
        // user.userInfo.avatar = data.data.url;
        uni.hideLoading();
      }
    },
    fail: function (e) {
      uni.hideLoading();
      avatar.value;
      uni.showToast({
        title: "上传失败,请重新上传",
        icon: "none",
      });
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/my/index",
        });
      }, 1500);
    },
  });
};

const showTab = ref(false);
const closeTab = () => {
  showTab.value = false;
  tabValue.value = "";
};

const tabValue = ref("");
const confirmfun = (value) => {
  let arrlist = tagelist.value.filter(function (item) {
    return item.checked == true;
  });
  if (arrlist.length > 1) {
    uni.showToast({
      title: "标签最多两个",
      icon: "none",
    });
    return;
  }
  if (value.length > 10) {
    uni.showToast({
      title: "标签最多10个字",
      icon: "none",
    });
    return;
  }
  if (!value.length) {
    uni.showToast({
      title: "请输入标签名！",
      icon: "none",
    });
    return;
  }

  fromdate.value.arr = "";

  if (value != "") {
    tagelist.value.push({ title: value, checked: true });
  }
  showTab.value = false;
  tabValue.value = "";
};
</script>

<template>
  <view class="upgrade">
    <view class="upgrade-top-title">基础信息</view>
    <view class="changePhone-card">
      <view class="example-body custom-image-box">
        <text class="text">头像</text>

        <uni-file-picker
          limit="1"
          :del-icon="false"
          disable-preview
          :imageStyles="imageStyles"
          :auto-upload="false"
          @select="selectFileNew"
          sizeType="['compressed']"
          file-mediatype="image"
        >
          <image class="setting-avatar" :src="avatar" mode="aspectFill"></image>
        </uni-file-picker>
      </view>
      <view class="list-item">
        <view class="list-item-left"><text>*</text>手机号</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.mobile"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>
      <view class="list-item">
        <view class="list-item-left"><text>*</text>姓名</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.real_name"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>
      <view class="list-item">
        <view class="list-item-left"><text>*</text>头衔</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.title"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>
      <view class="list-item">
        <view class="list-item-left">座机</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.telphone"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>

      <view class="list-item">
        <view class="list-item-left">邮箱</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.email"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>

      <view class="list-item">
        <view class="list-item-left"><text>*</text>公司名称</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.company"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>
      <view class="list-item">
        <view class="list-item-left"><text>*</text>地址</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.address"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>
      <view class="list-item list-item1">
        <view class="list-item-left">微信号</view>
        <view class="list-item-right">
          <u--input
            v-model="fromdate.wechat"
            border="none"
            placeholder="请填写"
          ></u--input>
        </view>
      </view>

      <!-- <button class="btn">
				<text class="btn-text">确定修改</text>
			</button> -->
    </view>

    <u--form
      labelPosition="left"
      :model="fromdate"
      :rules="rules"
      ref="uForm"
      labelWidth="80"
    >
      <view class="upgrade-top-title upgrade-top-title2">个性专栏</view>
      <view class="user-form">
        <!-- 个人 -->

        <!-- 企业 -->
        <view>
          <u-form-item label="个人签名" prop="name" borderBottom ref="item1">
            <u--input
              v-model="fromdate.signature"
              border="none"
              placeholder="请输入个人签名"
            ></u--input>
          </u-form-item>
          <view class="imag-title">背景图</view>

          <u-form-item
            label=""
            prop="business"
            label-width="0"
            borderBottom
            ref="item1"
          >
            <up-upload
              :fileList="fileList1"
              @afterRead="
                (val) => {
                  afterRead1(val, 1);
                }
              "
              @delete="
                (val) => {
                  deletePic1(val, 1);
                }
              "
              name="1"
              multiple
              :maxCount="1"
              :previewFullImage="true"
            >
            </up-upload>
          </u-form-item>
          <view class="imag-title">视频简介</view>
          <u-form-item
            label=""
            prop="business"
            label-width="0"
            borderBottom
            ref="item1"
          >
            <up-upload
              :fileList="fileList2"
              @afterRead="
                (val) => {
                  afterRead2(val, 2);
                }
              "
              @delete="
                (val) => {
                  deletePic2(val, 2);
                }
              "
              accept="video"
              name="2"
              multiple
              :maxCount="1"
              :previewFullImage="true"
            >
            </up-upload>
          </u-form-item>
          <view class="imag-title">视频封面</view>
          <u-form-item
            label=""
            prop="business"
            label-width="0"
            borderBottom
            ref="item1"
          >
            <up-upload
              :fileList="fileList3"
              @afterRead="
                (val) => {
                  afterRead3(val, 3);
                }
              "
              @delete="
                (val) => {
                  deletePic3(val, 3);
                }
              "
              name="3"
              multiple
              :maxCount="1"
              :previewFullImage="true"
            >
            </up-upload>
          </u-form-item>

          <view class="item-line">
            <u-form-item label="我的标签" prop="name" borderBottom ref="item1">
              <view @click="showTab = true" class="inp-text">请输入标签</view>
              <!-- <u--input
              class="input-qm"
              v-model="fromdate.arr"
              border="none"
              @confirm="confirmfun"
              placeholder="输入签名"
              @blur="confirmfun"
            ></u--input> -->
              <!-- <up-input
              :show="showTab"
              class="input-qm"
              v-model="fromdate.arr"
              border="none"
             @click="showTab = true"
              placeholder="输入签名"
            ></up-input> -->
            </u-form-item>
          </view>

          <view class="input-qm-tage"
            ><up-tag
              class="tag-index"
              v-for="(item, index) in tagelist"
              :key="index"
              :text="item.title"
              closable
              :show="item.checked"
              @close="item.checked = false"
            ></up-tag
          ></view>

          <view class="imag-title">图文介绍</view>
          <u-form-item label="" prop="business" label-width="0" ref="item1">
            <up-upload
              :fileList="fileList4"
              @afterRead="
                (val) => {
                  afterRead4(val, 4);
                }
              "
              @delete="
                (val) => {
                  deletePic4(val, 4);
                }
              "
              name="4"
              multiple
              :maxCount="9"
              :previewFullImage="true"
            >
            </up-upload>
          </u-form-item>
        </view>
      </view>

      <!-- 店长 -->
    </u--form>

    <view
      class="foodr-list"
      v-if="(type == 1 || type == 2) && fromdate.level_id != 201"
    >
      <view class="list-index">
        <view class="list-index-left list-index-left-qy"
          ><text>*</text>经营区域</view
        >
        <view class="list-index-right add-witdh" @click="showaddressfun">
          {{
            fromdate.operating_area && fromdate.operating_area.province
              ? fromdate.operating_area.province +
                "/" +
                fromdate.operating_area.city +
                "/" +
                fromdate.operating_area.area
              : "请选择省/市/区"
          }}

          <u-icon name="arrow-right" color="#8C8C8C" size="16"></u-icon>
        </view>
      </view>
      <view class="list-index">
        <view class="list-index-left">经营地址</view>
        <view class="list-index-input">
          <u--input
            v-model="fromdate.address"
            placeholder="经营地址"
            border="none"
          ></u--input
        ></view>
      </view>
    </view>
  </view>

  <view class="foodr-bt">
    <view class="bt-sbuit" @click="nextfun">保存</view>
  </view>

  <!-- 标签弹框 -->
  <view class="password_show">
    <u-popup
      :show="showTab"
      mode="center"
      round="10"
      @close="close"
      @open="open"
    >
      <view class="productGift">
        <view class="popup-content-title">添加标签</view>
        <view class="popup-content-item">请输入您想添加的标签10字内 </view>
        <u-input
          class="popup-content-input"
          v-model="tabValue"
          clearable
          :cursor="-2"
          border="none"
          @click="showTab = true"
          placeholder="请输入标签名称"
          :maxlength="10"
        ></u-input>
        <view class="popup-content-box">
          <view class="popup-content-bt">
            <view class="popup-content-qx" @click="closeTab">取消</view>
            <view class="popup-content-cl" @click="confirmfun(tabValue)"
              >确定</view
            >
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
